<template>
    <div class="main-content">
      <div class="main-header">
        <h2>Welcome to Homebox</h2>
        <button class="btn btn-primary">Get Started</button>
      </div>
      <div class="main-section">
        <div class="card">
          <i class="fa fa-box"></i>
          <h3>Manage Your Items</h3>
          <p>Effortlessly organize and track your belongings.</p>
        </div>
        <div class="card">
          <i class="fa fa-search"></i>
          <h3>Quick Search</h3>
          <p>Find your items in seconds with powerful search.</p>
        </div>
        <div class="card">
          <i class="fa fa-chart-bar"></i>
          <h3>Analytics</h3>
          <p>Get insights into your item usage.</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MainContent'
  };
  </script>
  
  <style scoped>
  /* 主内容区域样式 */
  .main-content {
    flex: 1;
    padding: 20px;
  }
  
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .main-header h2 {
    font-size: 24px;
  }
  
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .btn-primary {
    background-color: #007BFF;
    color: white;
  }
  
  .btn-primary:hover {
    background-color: #0056b3;
  }
  
  .main-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .card {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    flex: 1 1 calc(33.333% - 20px);
  }
  
  .card i {
    font-size: 36px;
    margin-bottom: 10px;
    color: #007BFF;
  }
  
  .card h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .card p {
    font-size: 14px;
    color: #666;
  }
  </style>